import { PageContainer } from '@ant-design/pro-layout';
import 'dayjs/locale/zh-cn';
import React, { useState } from 'react';
import { useAccess } from 'umi';
import TableActive from '../active/components/TableActive';
import DetailsTopic from '../topic/topic/components/DetailsTopic';
import TableSubmit from '../topic/submit/components/TableSubmit';

type DetailsType = {
  id: string;
  name: string;
};

export default (): React.ReactNode => {
  const access = useAccess();

  const [visible, setVisibleState] = useState<string>('manage');
  const [visibleData, setVisibleDataState] = useState<DetailsType>();

  const onBack = () => {
    setVisibleState('manage');
  };

  const onDetails = (id: string, name: string) => {
    setVisibleState('details');
    setVisibleDataState({ id, name });
  };

  const [activeKey, setActiveKey] = useState<string>('submit');

  const container = () => {
    if (visible === 'manage') {
      return (
        <PageContainer
          header={{
            breadcrumb: {},
          }}
          subTitle=""
          tabList={[
            {
              tab: '选题计划线索',
              key: 'submit',
            },
            {
              tab: '主动报送',
              key: 'active',
            },
          ]}
          tabActiveKey={activeKey}
          onTabChange={setActiveKey}
        >
          {activeKey === 'submit' ? <TableSubmit onDetails={onDetails} /> : <TableActive />}
        </PageContainer>
      );
    } else if (visible == 'details') {
      return <DetailsTopic onBack={onBack} id={visibleData?.id} name={visibleData?.name} />;
    } else {
      return <></>;
    }
  };

  return <>{container()}</>;
};
